<template>
    <div>
        <h1>NextTick</h1>
        <div ref="msgref">{{msg}}</div>
        <button @click="handlerGetData">修改获取msg</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg:"xxxx"
        }
    },
    methods:{
        handlerGetData() {
            this.msg = "####" 
            // render 操作时类似于一个异步操作  希望将异步操作强行转为同步
            // 修饰msg之后  通过dom节点的方式 获取div中的数值
            // $nextTick 表示强行渲染之后  才能获取到的节点
            this.$nextTick(() => {
                const msg = this.$refs.msgref.innerHTML;
               console.log(msg);
            })
           

        }
    }
};
</script>

<style>

</style>
